var wxDraw = require("../../utils/wxdraw").wxDraw;
var Shape = require("../../utils/wxdraw").Shape;
var context = wx.createCanvasContext('first');//还记得 在wxml里面canvas的id叫first吗
var timeout;
Page({
  data: {
    isDown: false,
    percent: 40,
    show_album: false,
    mp3:0,
    finish:false,
    imgArr: [
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534241231427&di=3fd6a9caf18f4000babb07eb8e68a286&imgtype=0&src=http%3A%2F%2Fwww.maogp.com%2FUpFile%2F20140421170455.jpg',
    ],
    showImg: []
  },
  startDown: function (e) {
    this.setData({
      isDown: true,
      percent: 100,
    })
  },
  pholist: function () {
    wx.navigateTo({
      url: '../pholist/pholist',
    })
  },
  index: function () {
    wx.reLaunch({
      url: '../index/index',
    })
  },
  //上进下出 0
  UpDown: function (imgUrl) {
    var that = this;
    let img = new Shape('image', { x: that.data.itemWidth, y: 0, w: 230, h: 290, file: imgUrl }, 'fill', true);
    let photo_frame = new Shape('image', { x: that.data.itemWidth, y: 0, w: 270, h: 335, file: '../../images/album_2.png' }, 'fill', true);
    that.wxCanvas.add(img);
    that.wxCanvas.add(photo_frame);
    img.animate({ "y": that.data.itemHeight }, { duration: 1000 }).animate({ "y": that.data.itemHeight }, { duration: 2000 }).animate({ "y": that.data.winHeight + 300 }, { duration: 1000 }).start(1);
    photo_frame.animate({ "y": that.data.itemHeight }, { duration: 1000 }).animate({ "y": that.data.itemHeight }, { duration: 2000 }).animate({ "y": that.data.winHeight + 300 }, { duration: 1000 }).start(1);
  },
  //上进右出 1
  UpRight: function (imgUrl) {
    var that = this;
    let img = new Shape('image', { x: that.data.itemWidth, y: 0, w: 230, h: 290, file: imgUrl }, 'fill', true);
    let photo_frame = new Shape('image', { x: that.data.itemWidth, y: 0, w: 270, h: 335, file: '../../images/album_2.png' }, 'fill', true);
    that.wxCanvas.add(img);
    that.wxCanvas.add(photo_frame);
    img.animate({ "y": that.data.itemHeight }, { duration: 1000 }).animate({ "y": that.data.itemHeight }, { duration: 2000 }).animate({ "x": that.data.winWidth + 200 }, { duration: 1000 }).start(1);
    photo_frame.animate({ "y": that.data.itemHeight }, { duration: 1000 }).animate({ "y": that.data.itemHeight }, { duration: 2000 }).animate({ "x": that.data.winWidth + 200 }, { duration: 1000 }).start(1);
  },
  //左进下出 2
  LeftDown: function (imgUrl) {
    var that = this;
    let img = new Shape('image', { x: 0, y: that.data.itemHeight, w: 230, h: 290, file: imgUrl }, 'fill', true);
    let photo_frame = new Shape('image', { x: 0, y: that.data.itemHeight, w: 270, h: 335, file: '../../images/album_2.png' }, 'fill', true);
    that.wxCanvas.add(img);
    that.wxCanvas.add(photo_frame);
    img.animate({ "x": that.data.itemWidth }, { duration: 1000 }).animate({ "x": that.data.itemWidth }, { duration: 2000 }).animate({ "y": that.data.winHeight + 300 }, { duration: 1000 }).start(1);
    photo_frame.animate({ "x": "+" + that.data.itemWidth }, { duration: 1000 }).animate({ "x": that.data.itemWidth }, { duration: 2000 }).animate({ "y": that.data.winHeight + 300 }, { duration: 1000 }).start(1);
  },
  //下旋进 3
  DownRotate: function (imgUrl) {
    var that = this;
    let img = new Shape('image', { x: that.data.itemWidth, y: that.data.winHeight + 200, w: 230, h: 290, file: imgUrl }, 'fill', true);
    let photo_frame = new Shape('image', { x: that.data.itemWidth, y: that.data.winHeight + 200, w: 270, h: 335, file: '../../images/album_2.png' }, 'fill', true);
    that.wxCanvas.add(img);
    that.wxCanvas.add(photo_frame);
    img.animate({ "y": that.data.itemHeight, rotate: Math.PI * 2 }, { duration: 1000 }).animate({ "x": that.data.itemWidth }, { duration: 2000 }).animate({ "y": that.data.winHeight + 300 }, { duration: 1000 }).start(1);
    photo_frame.animate({ "y": that.data.itemHeight, rotate: Math.PI * 2 }, { duration: 1000 }).animate({ "x": that.data.itemWidth }, { duration: 2000 }).animate({ "y": that.data.winHeight + 300 }, { duration: 1000 }).start(1);
  },
  //右进下出 4
  RightDown: function (imgUrl) {
    var that = this;
    let img = new Shape('image', { x: that.data.winWidth + 200, y: that.data.itemHeight, w: 230, h: 290, file: imgUrl }, 'fill', true);
    let photo_frame = new Shape('image', { x: that.data.winWidth + 200, y: that.data.itemHeight, w: 270, h: 335, file: '../../images/album_2.png' }, 'fill', true);
    that.wxCanvas.add(img);
    that.wxCanvas.add(photo_frame);
    img.animate({ "x": that.data.itemWidth }, { duration: 1000 }).animate({ "x": that.data.itemWidth }, { duration: 2000 }).animate({ "y": that.data.winHeight + 300 }, { duration: 1000 }).start(1);
    photo_frame.animate({ "x": that.data.itemWidth }, { duration: 1000 }).animate({ "x": that.data.itemWidth }, { duration: 2000 }).animate({ "y": that.data.winHeight + 300 }, { duration: 1000 }).start(1);
  },
  //左下旋进右出 5
  LeftRotateRight: function (imgUrl) {
    var that = this;
    let img = new Shape('image', { x: 0, y: that.data.winHeight + 300, w: 230, h: 290, file: imgUrl }, 'fill', true);
    let photo_frame = new Shape('image', { x: 0, y: that.data.winHeight + 300, w: 270, h: 335, file: '../../images/album_2.png' }, 'fill', true);
    that.wxCanvas.add(img);
    that.wxCanvas.add(photo_frame);
    img.animate({ rotate: Math.PI * 3 / 2 }).animate({ x: that.data.itemWidth, y: that.data.itemHeight, rotate: Math.PI * 2 }, { duration: 1000 }).animate({ x: that.data.itemWidth }, { duration: 2000 }).animate({ x: that.data.winWidth + 200 }, { duration: 1000 }).start(1);
    photo_frame.animate({ rotate: Math.PI * 3 / 2 }).animate({ x: that.data.itemWidth, y: that.data.itemHeight, rotate: Math.PI * 2 }, { duration: 1000 }).animate({ x: that.data.itemWidth }, { duration: 2000 }).animate({ x: that.data.winWidth + 200 }, { duration: 1000 }).start(1);
  },
  //渐变 6
  SlowChange: function (imgUrl) {
    var that = this;
    let img = new Shape('image', { x: that.data.itemWidth, y: that.data.itemHeight, w: 10, h: 10, file: imgUrl }, 'fill', true);
    let photo_frame = new Shape('image', { x: that.data.itemWidth, y: that.data.itemHeight, w: 10, h: 10, file: '../../images/album_2.png' }, 'fill', true);
    that.wxCanvas.add(img);
    that.wxCanvas.add(photo_frame);
    img.animate({ rotate: Math.PI * 3 / 2 }).animate({ x: that.data.itemWidth, y: that.data.itemHeight, w: 230, h: 290, rotate: Math.PI * 2 }, { duration: 1000 }).animate({ x: that.data.itemWidth }, { duration: 2000 }).animate({ x: that.data.itemWidth, y: that.data.itemHeight, w: 0, h: 0, rotate: Math.PI / 2 }, { duration: 1000 }).start(1);
    photo_frame.animate({ rotate: Math.PI * 3 / 2 }).animate({ x: that.data.itemWidth, y: that.data.itemHeight, w: 270, h: 335, rotate: Math.PI * 2 }, { duration: 1000 }).animate({ x: that.data.itemWidth }, { duration: 2000 }).animate({ x: that.data.itemWidth, y: that.data.itemHeight, w: 0, h: 0, rotate: Math.PI / 2 }, { duration: 1000 }).start(1);
  },
  exchangeLocalImg: function (albums) {
    console.log("777777")
    var that = this;
    var selectAlbums = albums;
    for (var i = 0; i < selectAlbums.length; i++) {
      wx.downloadFile({
        url: selectAlbums[i],
        success: function (res) {
          console.log("这是回调下载回来的图片本地路径===" + res.tempFilePath);
          that.data.showImg.push(res.tempFilePath);
        }
      })
    }
    that.setData({ finish: true });
    console.log(that.data.showImg);
  },
  randomShow: function (imgUrl, index) {
    var _this = this;
    //var index = Math.floor(Math.random() * 7);
    console.log(index);
    console.log(imgUrl);
    switch (index) {
      case 0:
        _this.UpDown(imgUrl);
        break;
      case 1:
        _this.UpRight(imgUrl);
        break;
      case 2:
        _this.LeftDown(imgUrl);
        break;
      case 3:
        _this.DownRotate(imgUrl);
        break;
      case 4:
        _this.RightDown(imgUrl);
        break;
      case 5:
        _this.LeftRotateRight(imgUrl);
        break;
      case 6:
        _this.SlowChange(imgUrl);
        break;
      default:
        _this.LeftRotateRight(imgUrl);
        break;
    }
  },
  repeatedMove: function (count, index, key) {
    var _this = this;
    var index = (index + 1) % count;
    var key = (key + 1) % 7;
    console.log("总的" + count);
    console.log("我的的" + index);

    timeout = setTimeout(function () {
      _this.wxCanvas = new wxDraw(context, 0, 0, 500, 800);
      _this.randomShow(_this.data.showImg[index],key);
      _this.repeatedMove(count, index, key);
    }, 5000);
  },
  loadFinish: function (count) {
    var _this = this;
    console.log('loadfinsh');
    console.log(count);
    if (!_this.data.finish) {
      setTimeout(function () {
        _this.loadFinish(count);
      }, 1000);
    } else {
      _this.setData({ show_album: true });
      _this.wxCanvas = new wxDraw(context, 0, 0, 500, 800);
      _this.randomShow(_this.data.showImg[0],0);
      _this.repeatedMove(count, 1, 1);
    }
  },
  music: function () {
    var that = this;
    if (that.data.mp3 == 1) {
      wx.pauseBackgroundAudio();
      that.setData({ mp3: 0 });
    } else {
      wx.playBackgroundAudio({
        //播放地址
        dataUrl: 'https://apitest.cndzys.com/wzf/1.mp3',
        title: '青云志',
        //图片地址
        coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'

      })
      that.setData({ mp3: 1 });
    }
  },
  chooseAgain:function(){
    wx.navigateTo({
      url: '../piclist/piclist',
    })
  },
  //播放音乐
  listenerButtonPlay: function () {
    var that = this;
    console.log("音乐播放");
    that.setData({ mp3: 1 });
    wx.playBackgroundAudio({
      //播放地址
      dataUrl: 'https://apitest.cndzys.com/wzf/1.mp3',
      title: '青云志',
      //图片地址
      coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'

    })

  },

  //暂停音乐
  listenerButtonPause: function () {
    var that = this;
    console.log("音乐暂停");
    that.setData({ mp3: 0 });
    wx.pauseBackgroundAudio();
  },
  chooseAgain: function () {
    wx.navigateTo({
      url: '../piclist/piclist',
    })
  },
  onShareAppMessage: function () {
    var that = this;
    return {
      title: "快看，我刚拍的动感相册照！你觉得好看吗？",
      path: 'pages/albums/albums?id=' + that.data.id,
      imageUrl: that.data.shareImg,
      success: function (res) {
        // 转发成功
        console.log("转发成功");
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败");
      }
    }
  },
  onLoad: function (options) {
    var _this = this;
    var id = options.id;
    var selectAlbums;
    clearTimeout(timeout);
    wx.getSystemInfo({
      success: function (res) {
        let w = res.windowWidth, h = res.windowHeight;
        _this.setData({
          winWidth: w,
          winHeight: h,
          itemWidth: w * 0.5,
          itemHeight: h * 0.45,
        });
        console.log(_this.data.itemWidth);
      },
    });
    //是否播放音乐
    //this.listenerButtonPlay();
    wx.onBackgroundAudioPlay(function () {
      console.log('onBackgroundAudioPlay')
    })

		/**
		 * 监听音乐暂停
		 */
    wx.onBackgroundAudioPause(function () {
      console.log('onBackgroundAudioPause')
    })


		/**
		 * 监听音乐停止
		 */
    wx.onBackgroundAudioStop(function () {
      console.log('onBackgroundAudioStop')
    })
    this.listenerButtonPlay();

    _this.setData({ id: id });
    wx.request({
      url: getApp().globalData.API_URI + '/index.php/face_getDynamicAlbum',
      data: {
        id: id
      },
      header: {
        "Content-Type": "applciation/json"
      },
      method: 'GET',
      success: function (res) {
        console.log(res.data);
        if (!res.data.error) {
          if (res.data.people_type == '女生') {
            wx.navigateTo({
              url: '../album/album?id=' + id,
            });
          }
          selectAlbums = res.data.album;
          _this.exchangeLocalImg(selectAlbums);
          console.log('mmmmmm' + selectAlbums[0]);
          _this.setData({ shareImg: selectAlbums[0] });
          console.log("啦啦啦啦");
          console.log(res.data.album);
          setTimeout(function () {
            _this.loadFinish(selectAlbums.length);
          }, 6000); 
          // setTimeout(function () {
          //   _this.setData({ show_album: true });
          //   _this.repeatedMove(selectAlbums.length, -1);
          // }, 5000);
        }
      }
    })
  },
  // onHide: function () {
  //   console.log("stop2")
  //   clearTimeout(timeout);
  // },
  onUnload: function () {
    console.log("stop")
    clearTimeout(timeout);
  }
})